<template>
  <n-badge :value="checkedLength">
    <n-button size="tiny" ghost :disabled="checkedLength === 0" class="px-10px" @click="handleSubmit">
      <icon-mdi:file-document-remove-outline class="mr-5px" />
      {{ props.text }}
    </n-button>
  </n-badge>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { fetchDeleteDetailBills } from '@/service';
import { useAppStore } from '@/store';
import { useBillContext } from '@/context';

export interface Props {
  /** 文字 */
  text?: string;
  /** 选中的表格行数据 */
  checkedData?: any;
}

interface Emits {
  (e: 'deleteIds', delIds: any): void;
}
const emit = defineEmits<Emits>();

const app = useAppStore();

const { useInject } = useBillContext();
const { setBillDatas } = useInject();

const props = withDefaults(defineProps<Props>(), {
  text: '提交',
  checkedData: null
});

const checkedLength = computed(() => props.checkedData.length);

function deleteClick(ids: any) {
  emit('deleteIds', ids);
}

function handleSubmit() {
  const checkedRows = props.checkedData;
  const billIds = checkedRows.map((v: any) => v);

  window.$dialog?.warning({
    title: '提示',
    content: `已选择 ${checkedLength.value} 条记录，确定${props.text}吗？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const res: any = await fetchDeleteDetailBills(billIds.toString());
      if (res.data) {
        deleteClick(billIds);
        setBillDatas(res.data);
        window.$message?.success(`${checkedRows.length}条记录已${props.text}`);
      } else {
        app.reloadPage();
      }
    }
  });
}
</script>

<style scoped></style>
